<html>
  <head>
    <meta charset="utf-8">
    <!-- NOTE: Don't change this Title -->
    <title>
      Quiz Maker Utility
    </title>
    <!-- Style for the custom alert box -->
    <!-- See: http://snipplr.com/view/46677/custom-alert-box-formatted-and-controlled-by-jscss/ -->
    <link href="common.css" rel="stylesheet" type="text/css">
    <link href="makequiz.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script type="text/javascript">
      // Script to support custom alert box available through this top-level window.
      // http://snipplr.com/view/46677/custom-alert-box-formatted-and-controlled-by-jscss/
      
      var ALERT_TITLE = "Copy and paste the following JSON string into quizzes.json.";
      var ALERT_BUTTON_TEXT = "Ok";
      
      if (document.getElementById) {
        window.alert = function (txt) {
          createCustomAlert(txt);
        }
      }
      
      function showCode() {
      // Generate JavaScript code and display it.
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
      var code = Blockly.Generator.workspaceToCode('JavaScript');
      $("#js_div").html(code);
    }
      
      function createCustomAlert(txt, title, btn_title) {
        if (!title)
          title = ALERT_TITLE;
        if (!btn_title)
          btn_title = ALERT_BUTTON_TEXT;
        var d = document;
        
        if (d.getElementById("modalContainer")) return;
        
        var mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
        mObj.id = "modalContainer";
        mObj.style.height = d.documentElement.scrollHeight + "px";
        
        var alertObj = mObj.appendChild(d.createElement("div"));
        alertObj.id = "alertBox";
        if (d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
        alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth) / 2 + "px";
        alertObj.style.visiblity = "visible";
        
        var h1 = alertObj.appendChild(d.createElement("h1"));
        h1.appendChild(d.createTextNode(title));
        
        var msg = alertObj.appendChild(d.createElement("p"));
        msg.appendChild(d.createTextNode(txt));
        //  msg.innerHTML = txt;
        
        var btn = alertObj.appendChild(d.createElement("a"));
        btn.id = "closeBtn";
        btn.appendChild(d.createTextNode(btn_title));
        btn.href = "#";
        btn.focus();
        btn.onclick = function () {
          removeCustomAlert();
          return false;
        }
          
          alertObj.style.display = "block";
      }
      
      function removeCustomAlert() {
        document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
      }
    </script>
    <script>
      var show_frame = false;
      var hint_counter = 1;
    	$(function () {
    		$("#setup").fadeIn();
   		$("#qframe").hide();
   		$("#instructions").hide();
   		$("#question").hide();
   		$("#js").hide();
   		$("#json").hide();
   		$("#help").hide();
    	});
    	
    	function setupInfo(){
    		$("#setup").fadeIn();
   		$("#qframe").hide();
   		$("#instructions").hide();
   		$("#question").hide();
   		$("#js").hide();
   		$("#json").hide();
   		$("#help").hide();
    	}
    	
      function createOrUpdateQuiz() {
        console.log("RAM createOrUpdateQuiz");
        Blockly.doIt('createorupdate',hint_counter);
      }
      
      
      function setupProblemBlocks() {
		   $("#setup").hide();
     		$("#question").hide();
   		$("#json").hide();
   		$("#help").hide();
   		$("#js").hide();
	  		$("#instructions").fadeIn();
	  		$("#qframe").fadeIn();
		  	console.log("RAM setupProblemBlocks()");
         Blockly.doIt('setupproblem',hint_counter);
      }
      
      function setupSolutionBlocks() {
		   $("#setup").hide();
     		$("#question").hide();
   		$("#json").hide();
   		$("#help").hide();
   		$("#js").hide();
	  		$("#instructions").fadeIn();
	  		$("#qframe").fadeIn();
        console.log("RAM setupSolutionBlocks()");
        Blockly.doIt('setupsolution',hint_counter);
      }
      
      function previewTheQuiz() {
      	$("#setup").hide();
     		$("#question").fadeIn();
   		$("#json").hide();
   		$("#help").hide();
   		$("#js").hide();
	  		$("#instructions").hide();
	  		$("#qframe").fadeIn();
        console.log("RAM previewTheQuiz()");
        Blockly.doIt('preview',hint_counter);
      }
      
      function generateJSON() {
      	$("#setup").hide();
     		$("#question").hide();
   		$("#json").fadeIn();
   		$("#help").hide();
   		$("#js").hide();
	  		$("#instructions").hide();
	  		$("#qframe").hide();
        console.log("RAM generateJSON()");
        Blockly.doIt('json',hint_counter);
      }
      
      function testGiveHint() {
        console.log("RAM testGiveHint()");
        Blockly.doIt('hint',hint_counter);
      }
      
      function toggleNewTest() {
        console.log("RAM toggleNewTest()");
        Blockly.doIt('submit',hint_counter);
      }
      
      function onAnswerTypeSelected(option) {
        console.log("RAM onAnswerTypeSelected()");
        if (option.value != "")
          Blockly.doIt('type', option);
      }
      
      function onExpressionTypeSelected(option) {
        console.log("RAM onExpressionTypeSelected()");
        Blockly.doIt('expression', option);
      }
      
      function getVariableRanges(obj) {
        console.log("RAM getVariableRanges()");
        Blockly.doIt('variables', obj);
      }
      
      function initQuizMaker() {
        console.log("RAM initQuizMaker()");
        Blockly.doIt('init', './');
      }
      
      function displayHelp() {
        console.log("RAM: help");
        $("#setup").hide();
     		$("#question").hide();
   		$("#json").hide();
   		$("#js").hide();
   		$("#help").fadeIn();
	  		$("#instructions").hide();
	  		$("#qframe").hide();
        Blockly.doIt('help');
        //  alert("Help is on the way");
      }
      
      function displayJS() {
        console.log("RAM: JavaScript");
        $("#setup").hide();
     		$("#question").hide();
   		$("#json").hide();
   		$("#help").hide();
   		$("#js").fadeIn();
	  		$("#instructions").hide();
	  		$("#qframe").hide();
        showCode();
        //  alert("Help is on the way");
      }
      
      
      
      function reset() {
        console.log("RAM: reset");
        var response = confirm("Are you sure? This will reinitialize the quiz.");
        if (response == true) {
          document.location.reload(true);
        }
      }
      
      function addHint() {
        hint_counter++;
        console.log("RAM: added hint");
        var text = document.createElement('div');
        text.innerHTML = '<br><input type="Text" id="hint_'+hint_counter+'" size="120" placeholder="Hint #'+hint_counter+'."> </input>';
        document.getElementById("hint_input").appendChild(text);
        
      }
      

      
      
      
    </script>
   </head>
   
   <body>
     
     <button title="Display instructions" class="help" id="help_btn" onclick="displayHelp()" align="right">
       Help
     </button>
     <button title="Reinitialize everything" class="help" id="reset_btn" onclick="reset()" align="right">
       Reset
     </button>
     <br>
     
     <div id="tabs">
       <ul>
         <li class="active">
           <a href="#" rel="info" onclick="setupInfo()">
             Quiz info
           </a>
         </li>
         <li>
           <a href="#setup" rel="setup" onclick="setupProblemBlocks()">
             Setup the quiz
           </a>
         </li>
         <li>
           <a href="#solution" rel="solution" onclick="setupSolutionBlocks()">
             Setup the solution
           </a>
         </li>
         <li>
           <a href="#preview" rel="preview"  onclick="previewTheQuiz()">
             Preview the quiz
           </a>
         </li>
         <li>
           <a href="#json" rel="json" onclick="generateJSON()">
             JSON
           </a>
         </li>
         <li>
           <a href="#js" rel="json" onclick="displayJS()">
             JavaScript
           </a>
         </li>
         <li>
           <a href="#help" rel="help" onclick="displayHelp()">
             Help
           </a>
         </li>
       </ul>
     </div>
     
     <!-- Tabs begin here -->
     <div id="tabs_content">
       
       <!--Setup the Problem -->
       <div id="setup" class="tab_content" style="display: block; visibility: visible">
         <!-- 
<fieldset>
<legend>
Quiz Maker Utility
</legend>
-->
      <input type="hidden" id="name">
    </input>
    Name:
    <input title="Plain text name for the quiz" size="" type="Text" id="display_name" value="Unique Quiz Name" onchange="createOrUpdateQuiz()">
    </input>
    &nbsp;&nbsp; Quiz Type:
    <select title="The type of quiz" id="answer_type" onchange="onAnswerTypeSelected(this)">
      <option title="The quiz type defines the type of exercise." value="">
        Required: You must select a quiz type.
      </option>
      <option title="The student's answer will be evaluated and the value compared to your solution." value="eval_expr">
        Expression Evaluation
      </option>
      <option title="The student's answer will be compared character-by-charecter with your solution." value="xml_blocks">
        Exact Block-for-block Match
      </option>
      <option title="The student-defined function will be evaluated on test inputs that you provide  and the results compared with your function's results." value="func_def">
        Function Definition
      </option>
      <option title="Procedure test." value="proc_def">
        Procedure Definition
      </option>
    </select>
    <!-- Some invisible elements that appear based on selection of answer_type -->
    <select title="Type of expression to evaluate" style="visibility:hidden" id="expression_type" onchange="onExpressionTypeSelected(this)">
      <option value="relation">
        Relational: &LT;, =, ...
      </option>
      <option value="arithmetic">
        Arithmetic: +, *, ...
      </option>
      <!-- 
<option value="boolean">
Boolean: AND, OR, NOT
</option>
-->
    </select>
    <br>
    Description:
    <input title="Type is a brief description of the quiz" type="Text" id="description" size="111" value="Describe the quiz problem.">
   </input>
   <br>
   QuestionHTML:
   <input title="Question presented to student. Can have HTML and variables. Hint 
<enter>
to prompt for variables" type="Text" onkeypress="if (event.keyCode == 13) getVariableRanges(this)" id="question_html" size="106" value="Can have HTML and string variables such as $#STR1#$ and numeric variables like -91.9. Press 
<ENTER>
to set."
</input>
     <div id="hint_input">
    <br>
    Hints: 
    <input type="Text" id="hint_1" size="120" placeholder="Hint #1.">
    
  </input>
  </div>
  <button title="Add another hint" onclick="addHint()">
    Add another hint.
  </button>
  
  <br>
Built-in Blocks
<input type="checkbox" name="built_ins" value="math" checked="true">
Math
<input type="checkbox" name="built_ins" value="logic" checked="true">
Logic
<input type="checkbox" name="built_ins" value="lists" checked="true">
Lists
<input type="checkbox" name="built_ins" value="text" checked="true">
Text
<input type="checkbox" name="built_ins" value="colors" checked="true">
Colors
<input type="checkbox" name="built_ins" value="controls" checked="true">
Controls
<input type="checkbox" name="built_ins" value="variables" checked="true">
Variables
<input type="checkbox" name="built_ins" value="procedures" checked="true">
Procedures
<br>
Components
<input type="checkbox" name="components" value="Button">
Button
<input type="checkbox" name="components" value="Sound">
Sound
<br>
<br>
<!-- 
<fieldset>
<legend>
Blocks Workspace: Used for setting up problem, setting up solution, and testing the quiz.
</legend>
-->

</div>
<!-- End of Setup Block-->


  

    <div id="instructions">
      Instructions go here
    </div>
		<div id="question">
        <div id="quiz_name" style="visibility:hidden">
          Quiz Name goes here
        </div>

        <div id="quiz_question" style="visibility:hidden">
          Here is where the quiz question goes.
        </div>
        <div id="hint_html" style="visibility:hidden">
          Here is where the hint goes.
        </div>


        <table>
          <tr>
            <td>
              <input style="visibility:hidden" id="quiz_answer" width="40" type="text" onkeypress="if (event.keyCode == 13) toggleNewTest()">
            </input>
        </td>
        <td class="tabmin">
          &nbsp;
      </td>
      <td align="center">
        <button style="visibility:hidden" id="hint_button" onclick="testGiveHint()">
          Hint
        </button>
      </td>
      <td class="tabmin">
        &nbsp;
      </td>
      <td class="tabmin">
        &nbsp;
      </td>
      <td align="center">
        <button style="visibility:hidden" id="submit_new_toggle" onclick="toggleNewTest()">
          Submit
        </button>
      </td>
      <td class="tabmin">
        &nbsp;
      </td>
    </tr>
  </table>

    <div style="visibility:hidden" contenteditable="true" width="300px" height="100px" id="quiz_result" readonly="readonly">
      Result goes here
    </div>
  </div>

<div id="qframe">
<script>
  function blocklyLoaded(blockly) {
    // Called once Blockly is fully loaded.
    window.Blockly = blockly;
    if (navigator.userAgent.indexOf("Firefox") != -1) {
      Blockly.svg.height.baseVal.value = 400;
      alert("For Firefox, setting Svg height = " + Blockly.svg.height.baseVal.value);
    }
  }
</script>

<iframe id="preview_frame" style="width: 100%; height: 100%; border: 1px solid #ccc;" src="blockly.html">
</iframe>
</div>
<!-- 
</fieldset>
-->
<!-- 
</fieldset>
-->

<div id="json" class="tab_content">
  <p id="json_code">
    
  </p>
</div>

<div id="js" class="tab_content">
  <div id = "js_div">
    
  </div>
</div>


<div id="help" class="tab_content">
  <div id = "help_div">
    Help content goes here.
  </div>
</div>
</div>
</div>
</body>
</html>
